<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜鸟教程</title>
    <!--为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，
     需要在网页的 head 之中添加 viewport meta 标签-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <!--导航开始-->
    <div class="row">
        <div class="navbar navbar-default " role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">菜鸟教程</a>
                </div>
                <div>
                    <ul class="nav navbar-nav">
                        <li ><a href="index.html">首页</a></li>
                        <li><a href="articles.html">文章</a></li>
                        <li class="active"><a href="askandanswer.html">问答</a></li>
                        <li><a href="selfinfo.html">个人中心</a></li>
                       <!-- <li><a href="faq.html">新手教程</a></li>-->
                    </ul>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="register.html"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
                    <li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
                </ul>
                <div class="nav navbar-nav navbar-right">
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-default">提交</button>
                    </form>
                </div>

            </div>

        </div>
    </div>
    <!--导航结束-->
    <!--这里是位置导航 开始-->
    <div class="row">
        <h1><pre>当前位置：首页->问答 </pre></h1>
    </div>
    <!--这里是平台的导航 结束-->
    <!--这里是 内容区开始-->
    <div class="row">
        <!--热门文章开始-->
        <div class="col-md-12">
            <div class="panel panel-info">
                <div class="panel-heading">

                    <h3 class="panel-title">
                        问答
                    </h3>
                    <!--<a class="btn btn-default" style="text-align: right">
                        我要提问
                    </a>-->
                </div>
                <div class="panel-body">
                    <!--这是一个按钮列表 开始-->
                    <div class="btn-group">
                        <button type="button" class="btn btn-default" id="newbtn">最新</button>
                        <!--<button type="button" class="btn btn-default" id="hotbtn">最热</button>-->
                        <button type="button" class="btn btn-default" id="rewardbtn">悬赏</button>
                    </div>

                    <!--这是一个按钮列表 结束-->
                    <!--这里是文章列表 开始-->
                    <div class="panel panel-info" id="newlist" >
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                全部 ： JAVA  大数据
                            </h3>
                        </div>
                    <div class="archive-list">
                        <div class="archive-list-item">
                            <div class="post-intro" style="width: 100%">
                                <h4><a target="_blank" href="http://www.runoob.com/bootstrap/bootstrap-v2-intro.html" rel="bookmark" title=" <em>Bootstrap</em> 简介"> <em>Bootstrap</em> 简介</a> <i class="fa fa-external-link"></i></h4>
                                <p>
                                    Bootstrap 简介 目标 Bootstrap是最流行的前端框架，目前已经发布了它的第三个版本（v3.0.0）。本教程将带您开始学习 Bootstrap
                                    3。 您还将看到如何使用自定义与众不同...							</p>
                            </div>
                        </div>

                        <div class="archive-list-item">
                            <div class="post-intro" style="width: 100%">
                                <h4><a target="_blank" href="http://www.runoob.com/bootstrap/bootstrap-tutorial.html" rel="bookmark" title=" <em>Bootstrap</em> 教程"> <em>Bootstrap</em> 教程</a> <i class="fa fa-external-link"></i></h4>
                                <p>
                                    Bootstrap 教程 Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于
                                    HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 本教程将向...							</p>
                            </div>
                        </div>

                        <div class="archive-list-item">
                            <div class="post-intro" style="width: 100%">
                                <h4><a target="_blank" href="http://www.runoob.com/bootstrap/bootstrap-intro.html" rel="bookmark" title=" <em>Bootstrap</em> 简介"> <em>Bootstrap</em> 简介</a> <i class="fa fa-external-link"></i></h4>
                                <p>
                                    Bootstrap 简介 什么是 Bootstrap？ Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于
                                    HTML、CSS、JAVASCRIPT 的。 历史 Bootstrap 是由...							</p>
                            </div>
                        </div>
                    </div>
                    <!--这里是文章列表 结束-->
                    <!--这里是分页的开始-->
                    <div class="article">
                        <div class="archive-list-item">
                            <div id="pagelist">
                                <ul class="pagination">
                                    <li><a href="#">&laquo;</a></li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">&raquo;</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--这里是分页的结束-->

                    </div>
                   <!-- <div class="panel panel-info" id="hotlist" >
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                (最热)全部 ： JAVA  大数据
                            </h3>
                        </div>
                        <div class="archive-list">
                            <div class="archive-list-item">
                                <div class="post-intro" style="width: 100%">
                                    <h4><a target="_blank" href="http://www.runoob.com/bootstrap/bootstrap-v2-intro.html" rel="bookmark" title=" <em>Bootstrap</em> 简介"> <em>Bootstrap</em> 简介</a> <i class="fa fa-external-link"></i></h4>
                                    <p>
                                        (最热)Bootstrap 简介 目标 Bootstrap是最流行的前端框架，目前已经发布了它的第三个版本（v3.0.0）。本教程将带您开始学习 Bootstrap
                                        3。 您还将看到如何使用自定义与众不同...							</p>
                                </div>
                            </div>
                        </div>
                        &lt;!&ndash;这里是文章列表 结束&ndash;&gt;
                        &lt;!&ndash;这里是分页的开始&ndash;&gt;
                        <div class="article">
                            <div class="archive-list-item">
                                <div id="pagelist">
                                    <ul class="pagination">
                                        <li><a href="#">&laquo;</a></li>
                                        <li><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">4</a></li>
                                        <li><a href="#">5</a></li>
                                        <li><a href="#">&raquo;</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>-->
                    <div class="panel panel-info" id="rewardlist" >
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                (精华)全部 ： JAVA  大数据
                            </h3>
                        </div>
                        <div class="archive-list">
                            <div class="archive-list-item">
                                <div class="post-intro" style="width: 100%">
                                    <h4><a target="_blank" href="http://www.runoob.com/bootstrap/bootstrap-v2-intro.html" rel="bookmark" title=" <em>Bootstrap</em> 简介"> <em>Bootstrap</em> 简介</a> <i class="fa fa-external-link"></i></h4>
                                    <p>
                                        (精华) Bootstrap 简介 目标 Bootstrap是最流行的前端框架，目前已经发布了它的第三个版本（v3.0.0）。本教程将带您开始学习 Bootstrap
                                        3。 您还将看到如何使用自定义与众不同...							</p>
                                </div>
                            </div>
                        </div>
                        <!--这里是文章列表 结束-->
                        <!--这里是分页的开始-->
                        <div class="article">
                            <div class="archive-list-item">
                                <div id="rewardpagelist">
                                    <ul class="pagination">
                                        <li><a href="#">&laquo;</a></li>
                                        <li><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">4</a></li>
                                        <li><a href="#">5</a></li>
                                        <li><a href="#">&raquo;</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>



            </div>

        </div>
    </div>
        <!--热门文章结束-->

    <!--这里是 内容区结束-->

    <!--这里是页脚 开始-->
    <div class="copyright">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <span>Copyright &copy; <a href=http://www.golaravel.com/ >会说话的时光</a></span> | <span><a href=http://www.miibeian.gov.cn/ target=_blank>京ICP备8888888888号</a></span> | <span>京公网安备12345678</span>
                </div>
            </div>
        </div>
    </div>
    <!--这里是页脚 结束-->

</div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        console.log("dom ready!");
        /*$("#hotlist").hide();*/
        $("#rewardlist").hide();
        $("#newbtn").click(function () {
            shownewarticles();
        });
        /*$("#hotbtn").click(function () {
            showhotarticles();
        });*/
        $("#rewardbtn").click(function () {
            showrewardarticle();
        });
    });
    function shownewarticles(){
        console.log("shownewarticles");
        $("#newlist").show();
        /*$("#hotlist").hide();*/
        $("#rewardlist").hide();
    }
    function showhotarticles(){
        console.log("showhotarticles");
        $("#newlist").hide();
        /*$("#hotlist").show();*/
        $("#rewardlist").hide();
    }
    function showrewardarticle(){
        console.log("showrewardarticle");
        $("#newlist").hide();
        /*$("#hotlist").hide();*/
        $("#rewardlist").show();
    }
</script>
<style>
    .copyright {
        background: #444;
        font-size: 13px;
        text-align: center;
        color: #999;
        padding: 20px 0;
        margin: 0 auto;
    }

</style>
</html>